<template>
<div>
  <div class="search">
     <input class="input" type="text" v-model="keyword" placeholder="请输入选择城市" />
  </div>
  <div v-if="keyshow" class="search-list">
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'CityInput',
  props: {
    citylist: Array
  },
  data () {
    return {
      keyword: '',
      keyshow: false,
      list: [],
      timer: null
    }
  },
  methods: {
    thinkshow () {
      this.keyword === '' ? this.keyshow = false : this.keyshow = true
    }
  },
  updated () {
    console.log(this.list)
  },
  watch: {
    keyword () {
      const result = []
      this.thinkshow()
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.citylist.forEach(element => {
          if (element.title.indexOf(this.keyword)) {
            for (let i in element.list) {
              result.push(element.list[i].title)
            }
          }
        })
      }, 20)
      this.list = result
    }
  }
}
</script>

<style lang="scss" scoped>
   .search{
       height: .7rem;
       line-height: .66rem;
       background: #00bcd4;
       text-align: center;
       .input{
           width: 96%;
           height: .56rem;
           text-align: center;
           border-radius: .1rem;
           padding: 0 .3rem;
           box-sizing: border-box;
           color: hotpink;
       }
   }
   .search-list{
     position: absolute;
     top: 1.54rem;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: #ccc;
     z-index: 1;
     ul{
       padding-top: .1rem;
       li{
       line-height: .4rem;
       padding-left: .2rem;
     }
     }
   }
</style>
